var skimimg = 0;
var hash="";
var bgcolor="black";
var detailViewMode=false;
var savedHeight = 0;
var savedWidth = 0;

Event.observe(window, 'resize', function (e) {
	if (window.innerHeight == savedHeight && 
		window.innerWidth == savedWidth) { e.stop(); }
	savedHeight = window.innerHeight;
	savedWidth = window.innerWidth;
	mosaicResize();
});

function swatchSkin(intSkin){
	setCookie('swatchSkin',intSkin,1);
	$('black').className="swatch";
	$('dkgrey').className="swatch";
	$('ltgrey').className="swatch";
	$('white').className="swatch";
	switch(intSkin) {
			// dkgrey
		case 'dkgrey' :
		case 1 :
			$$('div.gallery-thumb-round').invoke('setStyle', {backgroundPosition: "-200px 0px" });
			$$('table.gcBackground1').invoke('setStyle', {backgroundColor: "#262626"});
			$$('p.giTitle').invoke('setStyle', {color: "#a9a9a9"});
			$("dkgrey").className="swatch dkgrey sel dkgrey-with-sel-with-swatch";
			bgcolor="dkgrey";
			break
			// ltgrey
		case 'ltgrey' :
		case 2 :
			$$('div.gallery-thumb-round').invoke('setStyle', {backgroundPosition: "-400px 0px" });
			$$('table.gcBackground1').invoke('setStyle', {backgroundColor: "#d9d9d9"});
			$$('p.giTitle').invoke('setStyle', {color: "#333333"});
			$("ltgrey").className="swatch ltgrey sel ltgrey-with-sel-with-swatch";
			bgcolor="ltgrey";
			break;
			// white
		case 'white' :
		case 3 :
			$$('div.gallery-thumb-round').invoke('setStyle', {backgroundPosition: "-600px 0px" });
			$$('table.gcBackground1').invoke('setStyle', {backgroundColor: "#FFFFFF"});
			$$('p.giTitle').invoke('setStyle', {color: "#444444"});
			$("white").className="swatch white sel white-with-sel-with-swatch";
			bgcolor="white";
			break;
		// Black
		case 'black' :
		case 0 :
		default:
			$$('div.gallery-thumb-round').invoke('setStyle', {backgroundPosition: "0px 0px" });
			$$('table.gcBackground1').invoke('setStyle', {backgroundColor: "#000000"});
			$$('p.giTitle').invoke('setStyle', {color: "#a3a3a3"});
			$('black').className="swatch black sel black-with-sel-with-swatch";
			bgcolor="black";
			break;
	}
	updateHash();
}

function scaleIt(v,sliding){
	if(maxSize<100)maxSize=150;

	// Remap the 0-1 scale to fit the desired range
	v=.26+(v*(1.0-.26));
	var size = v*maxSize;

	toggleReflex(true);
	$$('.Fer').invoke('writeAttribute', {height: size+'px',width: size + 'px'});
	$$('.Fer').invoke('setStyle', {height: size+'px',width: size+'px'});
	if(!mosaicView && !sliding)
		toggleReflex(false);
}
function setCookie(c_name,value,expiredays)
{
	var exdate=new Date();
	exdate.setDate(exdate.getDate()+expiredays);
	document.cookie=c_name+ "=" +escape(value)+
		((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function getCookie(c_name)
{
	if (document.cookie.length>0)
	{
		c_start=document.cookie.indexOf(c_name + "=");
		if (c_start!=-1)
		{ 
			c_start=c_start + c_name.length+1; 
			c_end=document.cookie.indexOf(";",c_start);
			if (c_end==-1) c_end=document.cookie.length;
			return unescape(document.cookie.substring(c_start,c_end));
		} 
	}
	return "";
}

function checkCookie()
{
	var co=getCookie('slider');
	if (co!=null && co!="")
	{
		demoSlider.setValue(co);
	}
	co=getCookie('swatchSkin');
	if (co!=null && co!="")
	{
		swatchSkin(co);
	}
	else
	{swatchSkin('black');}
}
var iRatio = iWidth = iHeight=0;
//Set a updating timer so users can't update before the image has appeard..
function swatchImg(imageId)
{
	if( imageId < 0 || imageId >= slideshowImages.length) return;
	currentImg=imageId;

	iWidth=parseFloat(slideshowImages[imageId][2].replace(/,/gi, "."));
	iHeight=parseFloat(slideshowImages[imageId][3].replace(/,/gi, "."));
	iRatio=iWidth/iHeight;
	if(isNaN(iRatio)) iRatio=1.3333;

	if( mosaicView ) 
	{
		$('mosaicDetail').hide();
		$('imageTitle').update("<h2>"+slideshowImages[imageId][4]+"</h2>");

		$('mosaicImg').writeAttribute({src: slideshowImages[imageId][0]});
		$('mosaicImg').setStyle({cursor: "pointer"});
		$('mosaicDetail').appear({ duration: 0.6, delay: 0.1});
	}
	mosaicResize();
	
	/* Set controls for hover view. */
	(currentImg==0) ? $('prev_detail').addClassName('prev_detail_disabled') : $('prev_detail').removeClassName('prev_detail_disabled');	
	(currentImg!=0) ? $('prev_detail').addClassName('prev_detail') : $('prev_detail').removeClassName('prev_detail');	
	(currentImg==slideshowImages.length-1)  ? $('next_detail').addClassName('next_detail_disabled') : $('next_detail').removeClassName('next_detail_disabled');	
	(currentImg!=slideshowImages.length-1)  ? $('next_detail').addClassName('next_detail') : $('next_detail').removeClassName('next_detail');	
	/* Update image and title in focus view */
	$('img_detail').writeAttribute({src: slideshowImages[currentImg][0]});
	$('imageTitleLabel').update("<h2>"+slideshowImages[imageId][4]+"</h2>");
	if( detailViewMode )
	{
		//Image count.
		new Ajax.Request(slideshowImages[currentImg][1], { method:'get' });
	}
	updateHash();
}

function updateHash()
{
	viewMode = detailViewMode ? "detail" : (mosaicView ? "mosaic" : "grid");
	hash = "#img=" + currentImg + "&viewMode=" + viewMode + "&bgcolor=" + bgcolor;
	window.location.hash = hash;
}
function getAlbumHash(img)
{
	viewMode = detailViewMode ? "detail" : (mosaicView ? "mosaic" : "grid");
	return "#img=" + img + "&viewMode=" + viewMode + "&bgcolor=" + bgcolor;
}

var demoSlider;
var currentImg=0;
var mosaicView=true;

function mosaicResize()
{
	if(!$('mosaicGridContainer')) return; 
	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	if($('pearImageFlow'))
		$('pearImageFlow').setStyle({height: (myHeight-87)+"px", width: myWidth+"px", 'minHeight': ((myHeight-70)*0.9)+"px"});
	if($('imageflow'))
		$('imageflow').setStyle({height: (myHeight-53)+"px", width: (((myWidth*0.5)<(myHeight-53)) ? myWidth : ((myHeight-65)*2)) +"px"});
	$('detailImageView').setStyle({height: myHeight-165+"px"});
	(iRatio>(myWidth/(myHeight-165))) ? $('img_detail').setStyle({height: myWidth/iRatio+"px",width: myWidth+"px"}) : $('img_detail').setStyle({height: myHeight-165+"px",width: (myHeight-165)*iRatio+"px"});
	if(iHeight<(myHeight-165)&&iWidth<myWidth)
		$('img_detail').setStyle({height: iHeight+"px", width:iWidth+"px"});

	myWidth=myWidth-7;
	try{var myNav=document.getElementById('gbNavigator');if(myNav.innerHTML != ""){myHeight=myHeight-170;}}catch(e){myHeight=myHeight-142;}

	if ( !mosaicView )
	{
		$('mosaicGridContainer').setStyle({height: (myHeight+33)+"px", width: myWidth+"px"});
	}
	else
	{
		$('mosaicDetail').setStyle({width: Math.floor(myWidth*0.65)+"px"});
		$('mosaicGridContainer').setStyle({height: (myHeight+33)+"px", width: Math.floor(myWidth*0.35)+"px"});

		//Resize the image..
		myWidth=myWidth*0.65;
		(iRatio>(myWidth/myHeight)) ? $('mosaicImg').writeAttribute({height: myWidth/iRatio,width: myWidth}) : $('mosaicImg').writeAttribute({height: myHeight,width: myHeight*iRatio});
		if(iHeight<myHeight&&iWidth<myWidth) $('mosaicImg').writeAttribute({height:iHeight, width:iWidth});
	}
	if(document.getElementById(conf_imageflow)) refresh();
}

function bodyLoad(opt)
{
	/* Parse hash */
	hash = window.location.hash;
	var H = hash.substring(1).toQueryParams();
	if(H['img'] != undefined)
		currentImg = H['img'];
	if(H['bgcolor'] != undefined)
		swatchSkin(H['bgcolor']);
	switch(H['viewMode']){
		case('mosaic'):
			opt = 2;
			break;
		case('grid'):
			opt = 1;
			break;
		case('detail'):
			focusImage(H['img']);	
			break;
	}
	/* end parse hash */
	
	if(navigator.appName == "Microsoft Internet Explorer") $$('.track').invoke('setStyle', {'top': '-16px'}); //Fix for IE's poor page rendering. 
	demoSlider = new Control.Slider('handle0','track0', 
			{axis:'horizontal', minimum: 0, maximum:250, alignX: -10, increment: 2, sliderValue: 0.5});

	demoSlider.options.onSlide = function(value){
		scaleIt(value, true);
	}
	demoSlider.options.onChange = function(value){
		scaleIt(value, false);
		setCookie('slider',value,'1');
	}
	if(!$('mosaicGridContainer')){ $('loading').hide();maxSize=0; return; }
	//Set event for Thumb Click.
	$('mosaicGridContainer').select('img[class="Fer"]').each(function(s,index){ Event.observe(s, 'click', function(){ mosaicView ? swatchImg(index) : focusImage(index) ;}); });
	$('slideshow').observe('click', function(){ startSlideshow(); });
	$('mosaicDetail').observe('click', function(){ focusImage(currentImg); });
	$('prev_detail').observe('click', function(){ swatchImg(currentImg-1); });
	$('next_detail').observe('click', function(){ swatchImg(currentImg+1); });
	
	if(slideshowImages.length==0){opt=1;}
	switch (opt) {
		case 1:
			switchToGrid();
			break;
		case 2:
			switchToMosaic();
			break;
		default:
			mosaicResize();
			checkCookie();
	}
	$('loading').fade();
	window.setTimeout("preFetch()", 500);
	setKeys();
}

function switchToGrid()
{
	toggleReflex(true);
	if($('pearImageFlow')) $('pearImageFlow').hide();
	$('ContentAlbum').show();
	if(!$('mosaicGridContainer')) return;
	mosaicView=false;
	maxSize=225;
	checkCookie();
	$('mosaicDetail').hide();
	$('mosaicGridContainer').show();
	$$('p.giTitle','div.giInfo').invoke('show');
	switchMode('grid');
	mosaicResize();
	updateHash();
}

function switchToMosaic()
{
	toggleReflex(false);
	if($('pearImageFlow')) $('pearImageFlow').hide(); //.hide(); 
	$('ContentAlbum').show();
	if(!$('mosaicGridContainer')){return;}
	mosaicView=true;
	maxSize=125;
	checkCookie();
	$('mosaicDetail').show();
	$('mosaicGridContainer').show();
	$$('p.giTitle','div.giInfo').invoke('hide');
	switchMode('mosaic');
	swatchImg(currentImg);
	mosaicResize();
}
var slideShowMode=false
function startSlideshow()
{
	slideShowMode=true;
	$('play_detail').hide();
	$('pause_detail').show();
	new Effect.Appear('detailView', { duration: 1.0 });
	hideHoverV = setTimeout("hideHoverView()",3000);
	slideShowId=currentImg;
	slideShowId=0;
}
var slideShow=null;
var slideShowId;
function slideShowUpdate(id)
{
	if(id > slideshowImages.length)
	{
		id = 0;	
	}
	swatchImg(id);
	slideShow = setTimeout("slideShowUpdate("+ (id+1) +")", 1000);
}
function togglePlayPause()
{
	if(slideShow == null)//We are paused
	{
		$('play_detail').hide();
		$('pause_detail').show();
		slideShow = setTimeout("slideShowUpdate("+ (slideShowId+1) +")", 1000);
	}
	else //We are playing
	{
		$('pause_detail').hide();
		$('play_detail').show();
		clearTimeout(slideShow);
		slideShow=null;
	}
}
function focusImage(id)
{
	currentImg=id;
	$('imageTitleLabel').update("<h2>"+slideshowImages[id][4]+"</h2>");
	$('play_detail').hide();
	$('pause_detail').hide();
	swatchImg(id);
	new Effect.Appear('detailView', { duration: 1.0 });
	hideHoverV = setTimeout("hideHoverView()",3000);
	//Image count.
	detailViewMode=true;
	updateHash();
	new Ajax.Request(slideshowImages[currentImg][1], { method:'get' });
}

function startImageFlow()
{
	var objBody = $('gsContent');
	$('ContentAlbum').hide();
	if ( document.getElementById('pearImageFlow') ) {
		objBody.removeChild( document.getElementById('pearImageFlow') );
	}
	var objSlide = new Element('div', {'id': 'pearImageFlow'});

	objSlide.update('<div id="imageflow"><div id="images" style="offset: 300px;"> </div> <div id="captions"></div> <div id="scrollbar"> <div id="slider"></div> </div> </div>');
	objBody.appendChild(objSlide);

	toggleReflex(true);
	for (var i = 0; i < slideshowImages.length; i++) {
		$('images').insert(new Element('img', {'src': slideshowImages[i][0],'longdesc': 'javascript:focusImage(\''+i+'\');', 'alt': document.getElementById('mosaicGridContainer').getElementsByTagName('img')[i].getAttribute('alt')}));
	}

	current=(currentImg)*-xstep;
	caption_id=currentImg;
	refresh(true);

	iShow(conf_images);
	iShow(conf_scrollbar);
	initMouseWheel();
	initMouseDrag();
	mosaicResize();

	moveTo(current);
	glideTo(current, caption_id);

	switchMode('carousel');
}
function setKeys()
{
	/* Fixes the back button issue */
	window.onunload = function()
	{
		document = null;
	}
	document.onkeydown = function(event)
	{
		var charCode = getKeyCode(event);
		switch (charCode)
		{
			case 32: /* Space */
				if( slideShowMode) togglePlayPause();
			case 39: /* Right arrow key */
			case 78: /* N */
				swatchImg(currentImg+1); 
				if($('imageflow'))
				 	handle(-1);
				break;
			case 80: /* P */
			case 37: /* Left arrow key */
				swatchImg(currentImg-1); 
				if($('imageflow'))
				  handle(1);
				break;
		}
	}
}
function showHoverView(){
	if(hideHoverV != null) clearTimeout(hideHoverV);
	$('hoverView').appear();
	hideHoverV = setTimeout("hideHoverView()",3000);
}
function hideHoverView(){
	if(!hovering) $('hoverView').fade();
	hideHoverV = null;
}
var hideHoverV=null;
var hovering=false;
function switchMode(mode){
	$('mosaic').className="viewSwitcher mosaic mosaic-with-viewSwitcher";
	$('grid').className="viewSwitcher grid grid-with-viewSwitcher";
	$('carousel').className="viewSwitcher carousel carousel-with-viewSwitcher";

	switch(mode){
		case 'grid':
			$('grid').className="sel grid viewSwitcher grid-with-sel grid-with-viewSwitcher sel-with-viewSwitcher grid-with-sel-with-viewSwitcher";
			break;
		case 'mosaic':
			$('mosaic').className="mosaic viewSwitcher sel mosaic-with-viewSwitcher sel-with-viewSwitcher mosaic-with-sel mosaic-with-sel-with-viewSwitcher";
			break;
		case 'carousel':
			$('carousel').className="sel carousel viewSwitcher carousel-with-sel carousel-with-viewSwitcher sel-with-viewSwitcher carousel-with-sel-with-viewSeitcher";
			break;
	}
}

function preFetch()
{
	for (var i = 0; i < slideshowImages.length; i++) {
		var tempImage = new Element('img', {'src': slideshowImages[i][0]});
	}
}

function toggleReflex(hide)
{
	if(hide) {
	//	$$('.Fer').each(function(s) { cvi_reflex.remove(s); });
		$('mosaicGridContainer').select('img[class="Fer"]').each(function(s,index){ Event.observe(s, 'click', function(){ mosaicView ? swatchImg(index) : focusImage(index) ;}); });
	}
	else {
	//	$$('.Fer').each(function(s) { cvi_reflex.add(s, {height: 20, distance: 0 }); });
		$('mosaicGridContainer').select('canvas[class="Fer"]').each(function(s,index){ Event.observe(s, 'click', function(){ mosaicView ? swatchImg(index) : focusImage(index) ;}); });
	}
}

function hideDetailView()
{
	$('detailView').hide();
	slideShowMode=detailViewMode=false; 
	if(slideShow!=null) 
		clearTimeout(slideShow);
	slideShow=null;
	updateHash();
}
